<template>
  <div id="color">
    <div class="change-color">
      <el-color-picker style="cursor:pointer;" v-model="color"></el-color-picker>
      <el-input
        size="small"
        style="width: 150px;cursor: pointer !important;margin-left:15px"
        v-model="color"
      >
        <el-button @click="reset" slot="append">重置</el-button>
      </el-input>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "color",
  data() {
    return {
      color: this.originColor,
    };
  },
  watch: {
    currentId() {
      this.color = this.originColor;
    },
    color() {
      this.$emit("input", this.color);
    },
  },
  props: ["originColor", "initColor"],
  computed: {
    ...mapState(["currentTime", "currentId"]),
  },
  methods: {
    reset() {
      this.color = this.initColor;
      this.$emit("input", this.initColor);
    },
  },
};
</script>

<style lang="less" scoped>
@import '~@/assets/css/base.less';
/deep/.el-input-group__append,
.el-input-group__prepend {
  padding: 0 10px;
}
</style>
